<template>
  <div id="home">
    <!-- 导航栏 -->
    <nav-bar class="home-nav" ref="homeNav">
      <div slot="center">购物街</div>
    </nav-bar>

    <!-- 欺骗视觉吸顶tabControl -->
    <tab-control
      class="tabfixed"
      v-show="isTabFixed"
      ref="tabControl1"
      :titles="['流行', '新款', '精选']"
      @tabClick="tabClick"
    />
    <!-- 重构滚动 -->
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >
      <!-- 轮播 -->
      <home-swiper :banners="banners" @swiperImgLoad="sureLoad" />
      <!-- 广告 -->
      <home-recommend :recommends="recommends" />
      <!-- 产品特点 -->
      <home-feature />
      <!-- 商品分类 -->
      <tab-control
        ref="tabControl2"
        v-show="!isTabFixed"
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
      />
      <!-- 商品列表 -->
      <goods-list :goods="showGoods" />
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBkTop" />
  </div>
</template>

<script>
//公用组件模块
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'

//公用工具/方法
import { itemImglistener, backTop } from 'common/mixin'

//子组件模块
import HomeSwiper from './childComps/HomeSwiper'
import HomeRecommend from './childComps/HomeRecommend'
import HomeFeature from './childComps/HomeFeature'

//网络模块
import { getHomeMutiData, getHomeGoods } from 'network/home'

export default {
  name: 'home',
  data() {
    return {
      //轮播图数据
      banners: [],
      //广告数据存储
      recommends: [],
      //商品信息展示数据
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentType: 'pop',
      tabOffsetTop: 0,
      isTabFixed: false,
      saveY: 0
    }
  },
  components: {
    //公用组件模块
    NavBar,
    TabControl,
    GoodsList,
    Scroll,

    //子组件模块
    HomeSwiper,
    HomeRecommend,
    HomeFeature
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list
    }
  },
  methods: {
    /**
     *  事件监听方法
     */
    //切换商品分类
    tabClick(i) {
      switch (i) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
      }
      //动态决定激活样式
      this.$refs.tabControl1.currentIndex = i
      this.$refs.tabControl2.currentIndex = i
    },
    //返回顶部
    //使用混入复用
    // backClick() {
    //   //父组件访问子组件的属性
    //   //事件使用.native修饰符,监听组件点击
    //   // this.$refs.scroll.scroll.scrollTo(0, 0, 500)
    //   this.$refs.scroll.scrollTo(0, 0)
    // },
    //动态展示返回顶部按钮
    //使用混入
    // contentScroll(p) {
    //   this.isShowBkTop = -p.y >= 1000
    //   if (this.$route.path.indexOf('/home') !== 0) {
    //     const height = this.$refs.homeNav.$el.offsetHeight
    //     this.isTabFixed = -p.y >= this.tabOffsetTop - height
    //   }
    // },
    //上拉加载,重新请求数据
    loadMore() {
      this.getHomeGoods(this.currentType)
    },
    //动态展示返回顶部按钮
    contentScroll(p) {
      const height = this.$refs.homeNav.$el.offsetHeight
      this.isTabFixed = -p.y >= this.tabOffsetTop - height
      this.goBackTop(p)
    },
    //动态获取吸顶栏的偏移高度
    sureLoad() {
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    },
    //tabControl吸顶
    /**
     *  网络请求相关方法
     */
    //轮播图数据
    getHomeMutiData() {
      getHomeMutiData().then(res => {
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
      })
    },
    //商品数据
    getHomeGoods(type) {
      let page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page++
        //重置上拉加载
        this.$refs.scroll.finishPullUp()
      })
    }
  },
  //混入
  mixins: [itemImglistener, backTop],
  //页面被创建就要进行请求
  //不要在生命周期函数内执行逻辑判定
  created() {
    //1.请求轮播数据
    this.getHomeMutiData()
    //2. 请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },

  //使用混入了,这里内容取消
  mounted() {
    /*
      Vuex:
        在Vue中,vuex是一种状态管理模式,用来管理一些属性状态
      事件总线:
        在Vue中,有一个事件总线对象,我们可以通过事件总线来管理事件,
        它和Vuex一样,是一个独立开来,每一个组件都能访问的,而且没有mutations的限制,
        通过$bus.$emit() 发射事件到总线,总线会保管
        通过$bus.$on() 进行监听
    */
    //监听事件总线
    //使用事件混入,复用监听方法
    // const refresh = debounce(this.$refs.scroll.refresh, 200)
    // this.imgLoadFunc = () => {
    //   refresh()
    // }
    // this.$bus.$on('imgLoad', this.imgLoadFunc)
  },
  //路由重新活跃时,跳转至保存状态
  activated() {
    this.$refs.scroll.refresh()
    this.$refs.scroll.scrollTo(0, this.saveY, 0)
  },
  //路由失去活跃时,记录当前状态
  deactivated() {
    this.saveY = this.$refs.scroll.getScrollY()
    //停止监听这个事件,还要停止对应的函数
    this.$bus.$off('imgLoad', this.itemImglistener)
  }
}
</script>

<style type="text/css" scoped>
#home {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.home-nav {
  /*  原生浏览器滚动是整个网页滚动,所以要固定定位,使用better-scroll是局部滚动,就不需要这个属性了 
  position: fixed;
  left: 0;
  right: 0;
  top: 0; */
  color: #fff;
  background-color: var(--color-tint);
}
.tabfixed {
  position: relative;
  z-index: 10;
}
.content {
  overflow: hidden;
  flex: 1;
}
</style>
